<template>
    <div>
        <Top title="填写借款资料" iconShow="1"></Top>
        <div class="applyloan">
            <div class="applyloan-banner">
                <img src="../assets/applyBanner.png" />
            </div>
            <div class="applyloan-content">
                <div class="applyloan-content-line1">
                    <span class="left">期望金额</span>
                    <div class="mid">
                        <input ref="hopeMoney" type="text" v-model="form.money" maxlength="6" />
                    </div>
                    <span class="right">元</span>
                </div>
                <div class="applyloan-content-line2">
                    <span class="left">借款周期</span>
                    <div class="mid">
                        <input type="text" v-model="form.term" />
                    </div>
                    <span class="right">天</span>
                </div>
                <div class="applyloan-content-line3">
                    <span class="left">到账时间</span>
                    <div class="mid">
                        <input type="text" v-model="form.time" />
                    </div>
                    <span class="right">小时</span>
                </div>
                <mt-button type="primary" class="borrow-btn" @click="applyLoan">保存</mt-button>
            </div>
        </div>
    
    </div>
</template>
<script>
import Top from '../components/Header'
import { MessageBox } from 'mint-ui';
import { Indicator } from 'mint-ui'
import $cookie from 'vue-cookie'
export default {
    name: 'applyload',
    data() {
        return {
            form: {
                money: '',
                term: '',
                time: ''
            }
        }
    },
    methods: {
        /* 
        @params
        @function 申请借款
         */
        applyLoan() {
            let borrowerId = window.sessionStorage.getItem('borrowerId');
            if(!this.form.money){
                MessageBox.alert('输入金额不能为空~', '提示');
                return
            }else if(!this.form.term){
                MessageBox.alert('借款周期不能为空~', '提示');
                return
            }else if(!this.form.time){
                MessageBox.alert('到账时间不能为空~', '提示');
                return
            }
            if (!(100 < this.form.money && this.form.money < 100000)) {
                MessageBox.alert('借款金额最少为100元，最多为100000元~', '提示');
                return
            } else if (!(1 <= this.form.term && this.form.term <= 1000)) {
                MessageBox.alert('借款周期最少为1天，最多为1000天~', '提示');

            } else if (!(1 <= this.form.time && this.form.time <= 100)) {
                MessageBox.alert('倒账时间最少为1小时,最大为100小时~', '提示');
            } else {
                let postData = {
                    borrowerId: borrowerId,
                    expectedAmount: this.form.money,
                    borrowCycle: this.form.term,
                    paymentDate: this.form.time
                };
                /* 
                @params
                @function 调用申请借款接口
                */
                this.$http.post('/loansupermarket-app/personal/saveBorrowInfo.do', postData)
                    .then((response) => {
                        var resBody = response.body;
                        // console.log(resBody)
                        if (resBody.code == '000') {
                            MessageBox.alert('保存成功，点击确定返回个人中心页！').then(action => {
                                this.$router.push({ path: '/main/mine' })
                            });
                        } else {
                            MessageBox.alert(resBody.msg,'提示')
                        }
                        // 如果未登陆，那就加载进来直接跳转登陆页~
                        if (resBody.code == '444') {
                            this.$router.push({ path: '/login' })
                        }
                    })
            }

        }
    },
    mounted() {
        // this.$refs.hopeMoney.focus();
        let borrowerId = window.sessionStorage.getItem('borrowerId');
        let postData = { borrowerId: borrowerId }
        Indicator.open('加载中...')
        this.$http.post('/loansupermarket-app/personal/getBorrowInfo.do', postData)
            .then((response) => {
                setTimeout(function () {
                    Indicator.close()
                }, 500)
                var resBody = response.body;
                // console.log(resBody)
                if (resBody.code == '000') {
                    this.form = {
                        money: resBody.result.expectedAmount || '5000',
                        term: resBody.result.borrowCycle || '30',
                        time: resBody.result.paymentDate || '12'
                    }
                } else if (resBody.code == '444') {
                    // 如果没有登陆，那么跳转到登陆页
                    this.$router.push({ path: '/login' })
                } else {
                    alert(resBody.msg);
                }
            })
    },
    components: { Top }
}
</script>
<style lang='scss'>
@import '../scss/variable/base.scss';
.applyloan {
    &-banner {
        width: 100%;
        height: 4rem;
        margin-top: 1.2rem;
        img {
            width: 100%;
            height: 100%;
        }
    }
    &-content {
        width: 100%;
        box-sizing: border-box;
        padding: 0 0.4rem;
        &-line1,
        &-line2,
        &-line3 {
            box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.05);
            font-size: 0.4rem;
            margin-top: 0.4rem;
            width: 100%;
            height: 1.33rem;
            border-radius: 4px;
            background: #fff;
            line-height: 1.33rem;
            display: flex;
            .left {
                flex: 3;
            }
            .mid {
                flex: 7.5;
                text-align: right;
                input {
                    text-align: right;
                    font-size: 0.4rem;
                    border: none;
                    outline: none;
                    height: 90%;
                }
            }
            .right {
                flex: 1.5;
            }
        }
        &-line1 {
            input {
                color: red;
            }
        }
    }
    .borrow-btn {
        width: 100%;
        height: 1.2rem;
        margin-top: 0.94rem;
    }
}
</style>

